<template>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      v-model:current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";

const props = defineProps(["pagination"]);
const emits = defineEmits(["currentChange"]);

const handleCurrentChange = (page) => {
  emits("currentChange", page);
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
</style>
